@tailwind base;
@tailwind components;
@tailwind utilities;

:host,
:root {
  --background: 222.2 84% 4.9%;
  --foreground: 210 40% 98%;
  --primary: 217.22 91.22% 59.8%;
  --foreground: 210 40% 98%;
  --card: 222.2 84% 4.9%;
  --card-foreground: 210 40% 98%;
  --popover: 222.2 84% 4.9%;
  --popover-foreground: 210 40% 98%;
  --secondary: 217.2 32.6% 17.5%;
  --secondary-foreground: 210 40% 98%;
  --muted: 217.2 32.6% 17.5%;
  --muted-foreground: 215 20.2% 65.1%;
  --accent: 217.2 32.6% 17.5%;
  --accent-foreground: 210 40% 98%;
  --destructive: 0 62.8% 30.6%;
  --destructive-foreground: 210 40% 98%;
  --border: 217.2 32.6% 17.5%;
  --input: 217.2 32.6% 17.5%;
  --ring: 224.3 76.3% 48%;

  --radius: 12px;
}

@layer base {
  * {
    @apply border-border;
  }
}

.horizontal-center {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.horizontal-center.top {
  top: 5px;
}

.horizontal-center.bottom {
  bottom: 5px;
}

.vertical-center {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.vertical-center.left {
  left: 5px;
}

.vertical-center.right {
  right: 5px;
}

.kbd {
  @apply rounded-sm border border-b-2 px-1 py-0.5 inline-flex items-center justify-center bg-popover min-w-2 min-h-2;
}

.tooltip {
  @apply absolute invisible;
}

.has-tooltip:hover .tooltip {
  @apply z-40 visible;
}

.kk-main-icon {
  position: fixed;
  z-index: 9999;
  right: 20px;
  bottom: 50%;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  cursor: pointer;
}
.kk-main-icon-img {
  width: 100%;
  height: 100%;
}